import React from 'react'
import { Card, Row, Col, Button } from 'antd'
import View from '@/components/View'
import Toast from '@/components/Toast'

const handleA = () => {
  Toast('操作字少')
}

const handleB = () => {
  Toast({
    message: '操作成功操作成功操作成功',
    position: 'center-top'
  })
}
const handleC = () => {
  Toast({
    message: '操作成功操作成功操作成功操作成功操作成功操作成功',
    position: 'right-bottom'
  })
}

const handleD = () => {
  Toast({
    message: '操作成功操作成功操作成功操作成功操作成功操作成功操作成功操作成功操作成功操作成功操作成功',
    position: 'left-bottom'
  })
}

const ToastDemo = () => {
  return (
    <View className="app-at">
      <Card title="轻量提示 Toast">
        <h3> 四个基础常见的轻量提示 Toast演示，体验参考移动端。</h3>
        <Row>
          <Col span={1}></Col>
          <Col>
            <ol>
              <li>
                <p>默认右边顶部提示，延时1500关闭</p>
                <p><Button type="primary" onClick={handleA}>默认</Button></p>
              </li>
              <li>
                <p>顶部居中提示</p>
                <p><Button type="primary" onClick={handleB}>居中</Button></p>
              </li>
              <li>                
                <p>右下角提示</p>
                <p><Button type="primary" onClick={handleC}>右下角</Button></p>
              </li>
              <li>                
                <p>左下角提示</p>
                <p><Button type="primary" onClick={handleD}>左下角</Button></p>
              </li>
            </ol>
          </Col>
        </Row>
      </Card>
    </View>
  )
}

export default ToastDemo
